<template>
	<view>
		<nav-bar :title="pageTitle"></nav-bar>

		<video id="myVideo" style="width: 100%;" :src="rtspUrl" @error="videoErrorCallback" loop="true" autoplay="true"
		 page-gesture controls></video>
		<view class="info-root">
			<view class="info-line">
				<view class="info-key">ID</view>
				<view class="info-value">{{id}}</view>
			</view>
			<view class="info-line">
				<view class="info-key">监控名称</view>
				<view class="info-value">{{pageTitle}}</view>
			</view>
			<view  class="info-line">
				<view class="info-key">创建时间</view>
				<view class="info-value">{{createTime}}</view>
			</view>
			<view class="info-line">
				<view class="info-key">cType</view>
				<view class="info-value">{{cType}}</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: "",
				// rtspUrl:"rtmp://58.200.131.2:1935/livetv/cctv1",
				rtspUrl: "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov",
				createTime: "",
				danmuList: ["呸~呸~呸~"],
				id: '',
				cType: '',
			}
		},
		methods: {
			videoErrorCallback(e) {
				console.log("videoErrorCallback")
				console.log(e)
			}
		},
		onLoad(e) {
			this.pageTitle = e.cctvTitle;
			this.createTime = e.createTime
			this.cType = e.cType
			this.id = e.id

			// + "&cType=" + item.CType
			// + "&id=" + item.ID
			// + "&glid=" + item.glid
			// this.rtspUrl = e.Url;
		}
	}
</script>

<style>
	.info-root {
		background-color: #AAAAAA;
		margin: 1upx;
	}
	
	.info-line {
		/* padding: 20upx 40upx; */
		display: flex;
		flex-direction: row;
	}
	
	.info-key {
		width: 40%;
		background-color: #fff;
		padding: 5upx;
		margin: 1upx;
	}
	
	.info-value {
		width: 60%;
		background-color: #fff;
		padding: 5upx;
		margin: 1upx;
	}
</style>
